<template>
  <div class="airdropRules">
    <h3>{{ $t('candyBox.airdropRules') }}</h3>
    <p class="mb">{{ $t('candyBox.candyBoxTip1') }}</p>
    <p class="mb">{{ $t('candyBox.candyBoxTip2') }}</p>
    <p class="mb">{{ $t('candyBox.candyBoxTip3') }}</p>
    <p>{{ $t('candyBox.candyBoxTip4') }}</p>
    <div class="table">
      <div class="back1 flex">
        <div>{{ $t('ndxStake.memberLv') }}</div>
        <div v-for="(item, index) in list" :key="index">
          {{ item.level }}
        </div>
      </div>
      <div class="back2 flex">
        <div>{{ $t('candyBox.weightAirdrop') }}</div>
        <div v-for="(item, index) in ruleList" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'airdropRules', // 空投规则
  data() {
    return {
      list: [{
        level: 'VIP1',
      }, {
        level: 'VIP2',
      }, {
        level: 'VIP3',
      }, {
        level: 'VIP4',
      }, {
        level: 'VIP5',
      }, {
        level: 'VIP6',
      }, {
        level: 'VIP7',
      }, {
        level: 'VIP8',
      }, {
        level: 'VIP9',
      }, {
        level: 'VIP10',
      }]
    }
  },
  components: {},
  props: {
    ruleList: Array
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.airdropRules {
  font-size: 16px;
  color: #666;

  h3 {
    color: #333;
    margin-bottom: 20px;
  }

  .table {
    margin-top: 20px;
    border: 1px solid #ECF0F8;

    .back1, .back2 {
      line-height: 40px;
      background: #FCF1E3;
      color: #753F05;
      text-align: center;

      div:nth-child(1) {
        flex: 2;
      }

      div {
        flex: 1;
        border-right: 1px solid rgba(213, 183, 161, .2);
      }

      div:last-child {
        border-right: 0;
      }
    }

    .back2 {
      background: #fff;
    }
  }
}
</style>

